<template>
  <div style="height: 100%">
    <div class="label">{{isregister ? '已注册' : '未注册'}}</div>
    <van-nav-bar
      class="header"
      title="委托单位信息注册"
      left-text="返回"
      left-arrow
      @click-left="backToCenter">
    </van-nav-bar>
    <div class="main">
      <van-cell-group>
        <van-field
          name="单位名称"
          v-model="form.fname"
          label="单位名称："
          v-validate="'required'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.单位名称')"
          :error-message="errors.first('registerForm.单位名称')"
          required
          clearable
          placeholder="请输入单位名称">
          <!-- <van-icon slot="left-icon" name="manager-o" color="#56D7FF" style="margin-right: 5px;"/> -->
        </van-field>
        <van-field
          name="单位编码"
          v-model="form.fcode"
          label="单位编码："
          v-validate="'required'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.单位编码')"
          :error-message="errors.first('registerForm.单位编码')"
          required
          clearable
          placeholder="请输入单位编码">
          <!-- <van-icon slot="left-icon" name="manager-o" color="#56D7FF" style="margin-right: 5px;"/> -->
        </van-field>
        <van-field
          name="所属行业"
          v-model="form.findustryename"
          label="所属行业："
          @click="industryPickerOpen"
          v-validate="'required'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.所属行业')"
          :error-message="errors.first('registerForm.所属行业')"
          required
          readonly
          is-link
          placeholder="请选择所属行业">
          <!-- <van-icon slot="left-icon" name="points" color="#FB74CF" style="margin-right: 5px;"/> -->
        </van-field>
        <van-field
          name="类别名称"
          v-model="form.fclassidname"
          label="类别名称："
          @click="classPickerOpen"
          v-validate="'required'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.类别名称')"
          :error-message="errors.first('registerForm.类别名称')"
          required
          readonly
          is-link
          placeholder="请选择类别名称">
          <!-- <van-icon slot="left-icon" name="points" color="#FB74CF" style="margin-right: 5px;"/> -->
        </van-field>
        <van-field
          name="企业代码"
          v-model="form.fenterprisecode"
          label="企业代码："
          v-validate="'required'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.企业代码')"
          :error-message="errors.first('registerForm.企业代码')"
          required
          clearable
          placeholder="请输入企业代码">
          <!-- <van-icon slot="left-icon" name="phone-o" color="#F1BA45" style="margin-right: 5px;"/> -->
        </van-field>
        <van-field
          :value="form.fprovincename"
          label="省："
          name="省"
          v-validate="'required'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.省')"
          :error-message="errors.first('registerForm.省')"
          is-link
          clickable
          required
          readonly
          placeholder="请选择省"
          @click="cityPickerOpen(0)">
        </van-field>
        <van-field
          name="市"
          v-model="form.fcityname"
          label="市："
          v-validate="'required'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.市')"
          :error-message="errors.first('registerForm.市')"
          is-link
          required
          clearable
          readonly
          placeholder="请选择市"
          @click="cityPickerOpen(1)">
          <!-- <van-icon slot="left-icon" name="phone-o" color="#F1BA45" style="margin-right: 5px;"/> -->
        </van-field>
        <van-field
          name="县"
          v-model="form.fcountyname"
          label="县："
          v-validate="'required'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.县')"
          :error-message="errors.first('registerForm.县')"
          is-link
          required
          clearable
          readonly
          placeholder="请选择县"
          @click="cityPickerOpen(2)">
          <!-- <van-icon slot="left-icon" name="phone-o" color="#F1BA45" style="margin-right: 5px;"/> -->
        </van-field>
        <van-popup 
          v-model="city.visible" 
          get-container="body" 
          position='bottom'>
          <van-picker 
            :title="'请选择' + city.title"
            :columns="city.data"
            show-toolbar
            value-key='text'
            @confirm="cityConfirm"
            @cancel="city.visible = false"/>
        </van-popup>
        <van-field
          name="联系人"
          v-model="form.flinkman"
          label="联系人："
          v-validate="'required'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.联系人')"
          :error-message="errors.first('registerForm.联系人')"
          required
          placeholder="请输入联系人">
          <!-- <van-icon slot="left-icon" name="contact" color="#56D7FF" style="margin-right: 5px;"/> -->
        </van-field>
        <van-field
          name="地址"
          v-model="form.faddress"
          type="textarea"
          rows="2"
          label="地址："
          v-validate="'required'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.地址')"
          :error-message="errors.first('registerForm.地址')"
          required
          placeholder="请输入地址">
          <!-- <van-icon slot="left-icon" name="location-o" color="#51BD66" style="margin-right: 5px;"/> -->
        </van-field>
      </van-cell-group>
      <van-cell-group title="联系电话">
        <van-field
          name="固话"
          v-model="form.flinkmantelephone"
          label="固话："
          v-validate="'required|regex:^[0-9]{4}-[0-9]{7}$'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.固话')"
          :error-message="errors.first('registerForm.固话')"
          required
          clearable
          placeholder="请输入固话">
          <!-- <van-icon slot="left-icon" name="phone-o" color="#F1BA45" style="margin-right: 5px;"/> -->
        </van-field>
        <van-field
          name="手机"
          v-model="form.flinkmanphone"
          label="手机："
          v-validate="'required|regex:^(1[0-9]{10})?$'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.手机')"
          :error-message="errors.first('registerForm.手机')"
          required
          clearable
          placeholder="请输入联系手机">
          <!-- <van-icon slot="left-icon" name="phone-o" color="#F1BA45" style="margin-right: 5px;"/> -->
        </van-field>
      </van-cell-group>
      <van-cell-group title="发票">
        <van-field
          name="发票种类"
          v-model="form.finvoiceclassidname"
          label="发票种类："
          v-validate="'required'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.发票种类')"
          :error-message="errors.first('registerForm.发票种类')"
          required
          readonly
          is-link
          placeholder="请选择发票种类"
          @click="invoiceclassPickerOpen">
          <!-- <van-icon slot="left-icon" name="phone-o" color="#F1BA45" style="margin-right: 5px;"/> -->
        </van-field>
        <van-field
          name="发票信息"
          v-model="form.finvoicemessage"
          label="发票信息："
          v-validate="'required'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.发票信息')"
          :error-message="errors.first('registerForm.发票信息')"
          required
          clearable
          placeholder="请输入联系发票信息">
          <!-- <van-icon slot="left-icon" name="phone-o" color="#F1BA45" style="margin-right: 5px;"/> -->
        </van-field>
      </van-cell-group>
      <van-cell-group title="汇款信息">
        <van-field
          name="开户行"
          v-model="form.fbank"
          label="开户行："
          label-width="100px"
          v-validate="'required'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.开户行')"
          :error-message="errors.first('registerForm.开户行')"
          required
          clearable
          placeholder="请输入开户行">
          <!-- <van-icon slot="left-icon" name="phone-o" color="#F1BA45" style="margin-right: 5px;"/> -->
        </van-field>
        <van-field
          name="账号"
          v-model="form.faccount"
          label="账号："
          label-width="100px"
          v-validate="'required|regex:^[1-9]([0-9]{18})$'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.账号')"
          :error-message="errors.first('registerForm.账号')"
          required
          clearable
          placeholder="请输入账号">
          <!-- <van-icon slot="left-icon" name="phone-o" color="#F1BA45" style="margin-right: 5px;"/> -->
        </van-field>
      </van-cell-group>
      <van-cell-group>
        <van-field
          name="报告邮寄地址"
          v-model="form.fmailaddress"
          label="报告邮寄地址："
          label-width="100px"
          v-validate="'required'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.报告邮寄地址')"
          :error-message="errors.first('registerForm.报告邮寄地址')"
          required
          placeholder="请输入报告邮寄地址">
          <!-- <van-icon slot="left-icon" name="comment-o" color="#FF8929" style="margin-right: 5px;"/> -->
        </van-field>
        <van-field
          name="收件人"
          v-model="form.frecipient"
          label="收件人："
          label-width="100px"
          v-validate="'required'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.收件人')"
          :error-message="errors.first('registerForm.收件人')"
          required
          placeholder="请输入收件人">
          <!-- <van-icon slot="left-icon" name="comment-o" color="#FF8929" style="margin-right: 5px;"/> -->
        </van-field>
        <van-field
          name="收件人电话"
          v-model="form.frecipientphone"
          label="收件人电话："
          label-width="100px"
          v-validate="'required|regex:^(1[0-9]{10})?$'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.收件人电话')"
          :error-message="errors.first('registerForm.收件人电话')"
          required
          placeholder="请输入收件人电话">
          <!-- <van-icon slot="left-icon" name="comment-o" color="#FF8929" style="margin-right: 5px;"/> -->
        </van-field>
        <van-field
          name="电子版报告接收邮箱"
          v-model="form.frecipientmail"
          label="报告接收邮箱："
          label-width="100px"
          v-validate="'required|email'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.电子版报告接收邮箱')"
          :error-message="errors.first('registerForm.电子版报告接收邮箱')"
          required
          placeholder="请输入电子版报告接收邮箱">
          <!-- <van-icon slot="left-icon" name="comment-o" color="#FF8929" style="margin-right: 5px;"/> -->
        </van-field>
        <van-field
          name="集团公司名称"
          v-model="form.fgroupname"
          label="集团公司名称："
          label-width="100px"
          v-validate="'required'"
          data-vv-scope="registerForm"
          :error="errors.has('registerForm.集团公司名称')"
          :error-message="errors.first('registerForm.集团公司名称')"
          required
          placeholder="请输入集团公司名称">
          <!-- <van-icon slot="left-icon" name="comment-o" color="#FF8929" style="margin-right: 5px;"/> -->
        </van-field>
      </van-cell-group>
      <van-cell-group title="审批状态" v-if="isregister">
        <!-- <div style="padding: 40% 0;text-align: center;display: flex;justify-content: center;align-items: flex-end;">
          <van-icon name="info-o" size="20px" color="#FF976A" style="margin-right: 10px;" />
          <span>该用户已注册</span>
        </div> -->
        <van-cell title="审核状态" :value="audit.fisstatename"></van-cell>
        <van-cell title="审核结果" :value="audit.fapprovemessage"></van-cell>
      </van-cell-group>
      <div style="padding: 10px 16px;text-align: right">
        <van-button @click="register" size="small" type="info">保存</van-button>
        <!-- <van-button size="small" plain type="info">取消</van-button> -->
      </div>
    </div>
    <footer-btn></footer-btn>
    <van-popup v-model="classPicker.visible" position="bottom">
      <van-picker
        title="类别"
        show-toolbar
        :columns="classPicker.data"
        @cancel="classPicker.visible = false"
        @confirm="classPickerConfirm" />
    </van-popup>
    <van-popup v-model="industry.visible" position="bottom">
      <van-picker
        title="所属行业"
        show-toolbar
        :columns="industry.data"
        @cancel="industry.visible = false"
        @confirm="industryPickerConfirm" />
    </van-popup>
    <van-popup v-model="invoiceclass.visible" position="bottom">
      <van-picker
        title="发票类别"
        show-toolbar
        :columns="invoiceclass.data"
        @cancel="invoiceclass.visible = false"
        @confirm="invoiceclassPickerConfirm" />
    </van-popup>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import {
  NavBar,
  Button,
  Cell,
  CellGroup,
  Field,
  Popup,
  Picker,
  Toast,
  Icon
} from 'vant'
import footerBtn from '@/components/footerBtn'
import {
  searchbyidforlimscustomerid,
  limscustomer_insert,
  limscustomer_edit,
  limscustomer_searchlimscustomeridclass,
  city_query,
  industry_query,
  invoiceclass_query,
  limscustomer_searchlimscustomeridbyuserid
} from '@/api/custome'
export default {
  name: 'customeregister',
  components: {
    footerBtn,
    [NavBar.name]:NavBar,
    [Button.name]:Button,
    [Cell.name]:Cell,
    [CellGroup.name]:CellGroup,
    [Field.name]:Field,
    [Popup.name]:Popup,
    [Picker.name]:Picker,
    [Toast.name]:Toast,
    [Icon.name]:Icon,
  },
  created() {
    this.userid = 'bb5a8fe0-e03e-42ba-a1ed-279bba27b3a3'
    this.init()
  },
  data() {
    return {
      userid: Cookies.get('fusreid'),
      isregister: false,
      audit: {},
      form: {
        userid: Cookies.get('fusreid'),
        // fid: '', // 主键
        fname: '', // 单位名称
        fcode: '', // 单位编码
        findustry: '', // 所属行业
        findustryename: '', // 所属行业名称
        fclassid: '', // 类别主键
        fclassidname: '', // 类别名称
        // fcustomerid: '', // 客户主键
        // fcustomername: '', // 客户名称
        fenterprisecode: '', // 企业代码（个人填身份证号）
        fprovince: '', // 省
        fprovincename: '',
        fcity: '', // 市
        fcityname: '',
        fcounty: '', // 县
        fcountyname: '',
        flinkman: '', // 联系人
        faddress: '', // 地址
        flinkmantelephone: '', // 联系人固话
        flinkmanphone: '', // 联系人手机
        finvoiceclassid: '', // 开发票信息(发票种类)
        finvoiceclassidname: '',
        finvoicemessage: '', // 开发票信息(发票信息)
        fbank: '', // 汇款信息（开户行)
        faccount: '', // 汇款信息（账号)
        fmailaddress: '', // 报告邮寄地址
        frecipient: '', // 收件人
        frecipientphone: '', // 收件人电话
        frecipientmail: '', // 电子版报告接收邮箱
        fgroupname: '', // 集团公司名称
        // ffullcode: '', // 全编码
        // fstate: '1', // 状态(0=禁用,1=启用)
        fisstate: '0', // 审批状态(0待审批,1审批通过,2待审批)
        fapprovemessage: '', // 审批意见
      },
      classPicker: {
        visible: false,
        data: []
      },
      industry: {
        visible: false,
        data: []
      },
      invoiceclass: {
        visible: false,
        data: []
      },
      city: {
        visible: false,
        data: [],
        title: '',
        type: 0
      },
    }
  },
  watch: {
    'form.fprovince': function (val, oldval) {
      if (oldval !== '') {
        this.form.fcity = ''
        this.form.fcityname = ''
      }
    },
    'form.fcity': function (val, oldval) {
      if (oldval !== '') {
        this.form.fcounty = ''
        this.form.fcountyname = ''
      }
    }
  },
  methods: {
    init() {
      this.getState()
      this.getClass()
      this.getIndustry()
      this.getInvoiceclass()
    },
    getState() {
      searchbyidforlimscustomerid({
        userid: this.userid
      }).then(res => {
        this.isregister = res.sysparams.fisregister
        if (this.isregister) {
          this.audit = res.rows[0]
          limscustomer_searchlimscustomeridbyuserid({
            userid: this.userid
          }).then(res2 => {
            const data = res2.rows[0]
            for (const key in this.form) {
              this.form[key] = data[key]
            }
          })
        }
      })
    },
    getClass() {
      limscustomer_searchlimscustomeridclass().then(res => {
        this.classPicker.data = res.rows
      })
    },
    getIndustry() {
      industry_query().then(res => {
        this.industry.data = res.rows
        this.industry.data.forEach(el => {
          el.text = el.fname
        })
      })
    },
    getInvoiceclass() {
      invoiceclass_query().then(res => {
        this.invoiceclass.data = res.rows
        this.invoiceclass.data.forEach(el => {
          el.text = el.fname
        })
      })
    },
    classPickerOpen() {
      this.classPicker.visible = true
    },
    classPickerConfirm(val) {
      this.form.fclassid = val.fid
      this.form.fclassidname = val.text
      this.classPicker.visible = false
    },
    industryPickerOpen() {
      this.industry.visible = true
    },
    industryPickerConfirm(val) {
      this.form.findustry = val.fid
      this.form.findustryename = val.text
      this.industry.visible = false
    },
    invoiceclassPickerOpen() {
      this.invoiceclass.visible = true
    },
    invoiceclassPickerConfirm(val) {
      this.form.finvoiceclassid = val.fid
      this.form.finvoiceclassidname = val.text
      this.invoiceclass.visible = false
    },
    cityPickerOpen(type) {
      this.city.type = type
      const _this = this
      const cityFormat = [
        {title: '省', pid: 0},
        {title: '市', pid: _this.form.fprovince},
        {title: '县', pid: _this.form.fcity},
      ]
      if (cityFormat[type].pid === '') {
        Toast('请先选择' + cityFormat[type - 1].title + '！')
      } else {
        this.city.title = cityFormat[type].title
        city_query({
          fid: cityFormat[type].pid
        }).then(res => {
          this.city.data = res.rows
          this.city.data.forEach(el => {
            el.text = el.fname
          })
          this.city.visible = true
        })
      }
    },
    cityConfirm(city) {
      const cityFormat = [
        { id: 'fprovince', name: 'fprovincename' },
        { id: 'fcity', name: 'fcityname' },
        { id: 'fcounty', name: 'fcountyname' },
      ]
      this.form[cityFormat[this.city.type].id] = city.fid
      this.form[cityFormat[this.city.type].name] = city.fname
      this.city.visible = false
    },
    backToCenter() {
      history.go(-1)
    },
    register() {
      console.log(this.form)
      this.$validator.validateAll('registerForm').then((valid) => {
        if (valid) {
          if (this.isregister) {
            limscustomer_edit(this.form).then(res => {
              if (res.isSuccess) {
                Toast.success('注册完成，等待审核！')
                this.$router.push('/index')
              } else {
                Toast.fail(res.message)
              }
            })
          } else {
            limscustomer_insert(this.form).then(res => {
              if (res.isSuccess) {
                Toast.success('注册完成，等待审核！')
                this.$router.push('/index')
              } else {
                Toast.fail(res.message)
              }
            })
          }
        } else {
          Toast.fail('请输入正确的信息！')
        }
      })
    }
  }
}
</script>

<style scoped>

.label{
    font-size:13px;
    line-height:32px;
    background:orange;
    position:fixed;
    right:0;
    top:0;
    z-Index:2;
    padding:0 2em;
    -webkit-transform-origin:left bottom;
    -moz-transform-origin:left bottom;
    transform-origin:left bottom;
    -webkit-transform:translate(29.29%,-100%) rotate(45deg);
    -moz-transform:translate(29.29%,-100%) rotate(45deg);
    transform:translate(29.29%,-100%) rotate(45deg);
    text-indent:0;
}
</style>